<template> 
    <div class="footer">
        <li>
            <router-link to='/index'>
                <span  class="iconfont icon-shouye"></span>
                <br />首页
            </router-link>
        </li>
        <li>
            <router-link to='/classify'>
                <span class="iconfont icon-fenlei"></span>
                <br />分类
            </router-link>
        </li>
        <li>
            <router-link to='/test'>
                <span class="iconfont icon-wenjianbangong_yanjing test1"></span>
                <br />试戴
            </router-link>
        </li>
        <li>
            <router-link to='/shopping'>
                <span class="iconfont icon-cart1"></span>
                <br />购物车
            </router-link>
        </li>
        <li>
            <router-link to='/my'>
                <span class="iconfont icon-wode"></span>
                <br />我的
            </router-link>
        </li>


    </div>
</template> 

<script>     
export default {
    
}
</script>

<style lang='scss'>
.footer{
    display:flex;
    height: 1rem;
    border-top: 0.04rem solid #e8e8e8;
    justify-content: space-around;
    font-size: 0.24rem;
    line-height: 0.24rem;
    background: #fff;
    
    a{
        color: #313131;
        display: inline-block;
        text-align: center; 
        span{
            font-size: 0.64rem;
            color: #919191;
            line-height: 0.68rem; 
        } 
        .test1{
            height: 0.64rem;
            width: 0.64rem;
            border: 0.08rem solid #f5dbdb;
            border-radius: 50%;
            color: #d92628;
            position: relative;
            top: -0.15rem;
            background: #fff;

        }
        
    }
    .router-link-exact-active,.router-link-active span{
            color: #d92628 ;
        }

}

</style>
